<template>
    <el-card v-loading="loading">
        <div class="card-header">
            <span>大模型</span>
        </div>
        <el-form label-width="auto" :model="formLargeSetting" :rules="rules" ref="formRef">
            <el-form-item label="大模型链接方式" prop="type" :label-width="formLabelWidth">
                <el-radio-group v-model="formLargeSetting.type">
                    <el-radio :label="'online'">云端大模型</el-radio>
                    <el-radio :label="'local'">私有化大模型</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="温度值" :label-width="formLabelWidth" prop="temperature">
                <div style="display: inline-flex; align-items: center; width: 100%;">
                    <el-slider v-model="formLargeSetting.temperature" :min="0" :max="1" :step="0.1"
                        style="flex-grow: 1;" />
                    <span class="num-span">{{ formLargeSetting.temperature }}</span>
                </div>
            </el-form-item>
            <el-form-item label="最大token" :label-width="formLabelWidth" prop="max_token">
                <el-input-number v-model="formLargeSetting.max_token" :min="0" :max="10000"></el-input-number>
            </el-form-item>
            <el-form-item label="API_KEY" :label-width="formLabelWidth" prop="api_key">
                <el-input v-model="formLargeSetting.api_key" size="large" clearable />
            </el-form-item>
            <el-form-item label="top_p" :label-width="formLabelWidth" prop="top_p">
                <el-input v-model="formLargeSetting.top_p" size="large" clearable />
            </el-form-item>
        </el-form>
    </el-card>

    <div class="btn-box">
        <el-button size="large" @click="defaultClick">设为默认值</el-button>
        <el-button size="large" type="primary" @click="saveClick">保存</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formLabelWidth = '124px';
import sysSetting from "../../api/sysSetting"
const hasToken = <string>localStorage.getItem('accessToken');

const loading = ref(false);


//大模型模块
//定义大模型字段类型
interface defineLargeModal {
    type?: string | null,
    temperature?: number | null,
    max_token?: number | null,
    api_key?: string | null,
    top_p?: number | null,
};
//  大模型card默认参数
const formLargeSetting = ref<defineLargeModal>({
    type: '',
    temperature: 0,
    max_token: 0,
    api_key: '',
    top_p: 0,
});
//获取大模型数据
const getLargeDateBase = () => {
    loading.value = true; // 开始加载
    sysSetting.getLargeModalInfo(hasToken).then(res => {
        // console.log('res', res);
        Object.assign(allData, res.data.chatglm)
        formLargeSetting.value = {
            max_token: res.data.chatglm.max_token,
            type: res.data.chatglm.type,
            temperature: res.data.chatglm.temperature,
            api_key: res.data.chatglm.online.api_key,
            top_p: res.data.chatglm.top_p,
        }
    }).finally(() => {
        // ElMessage.error('获取用户信息失败');
        loading.value = false; // 开始加载
    });
};
// 储存所有数据\默认值
const allData = reactive({
    do_sample: true,
    history_len: 0,
    local: {
        lora: "",
        path: "",
    },
    max_token: 0,
    online: {
        api_key: "",
        model_id: "",
    },
    temperature: 0,
    top_p: 0,
    type: "online"
})
//设为默认值
const defaultClick = () => {
    // console.log('allData=',allData);
    formLargeSetting.value = {
        max_token: allData.max_token,
        type: allData.type,
        temperature: allData.temperature,
        api_key: allData.online.api_key,
        top_p: allData.top_p,
    }
}
const formRef = ref(null)
// 表单校验规则
const rules = {
    type: [{ required: true, message: '请选择大模型链接方式', trigger: 'change' }],
    temperature: [{ required: true, message: '请设置温度值', trigger: 'change' }],
    max_token: [{ required: true, message: '请设置最大token', trigger: 'change' }],
    api_key: [{ required: true, message: '请输入api_key', trigger: 'blur' }],
    top_p: [{ required: true, message: '请输入top_p', trigger: 'blur' }],
};

//保存
const saveClick = () => {
    // console.log('allData=',allData);
    // console.log('formLargeSetting.value=',formLargeSetting.value);

    const obj = {
        do_sample: allData.do_sample,
        history_len: allData.history_len,
        local: {
            lora: allData.local.lora,
            path: allData.local.path
        },
        max_token: formLargeSetting.value.max_token,
        online: {
            api_key: formLargeSetting.value.api_key,
            model_id: allData.online.model_id
        },
        temperature: formLargeSetting.value.temperature,
        top_p: formLargeSetting.value.top_p,
        type: formLargeSetting.value.type
    };
    // console.log('obj',obj);
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            sysSetting.updateSetLargeModal(hasToken, obj).then(res => {
                ElMessage.success('保存成功');
                getLargeDateBase();
            }).catch(error => {
                //   console.error(error);
                ElMessage.error('保存失败');
            });
        } else {
            ElMessage.error('信息未填写完整');
        }
    })

}

// 获取数据
getLargeDateBase()

</script>

<style scoped>
.el-card {
    width: 100%;
    margin-bottom: 30px;
}

.card-header {
    text-align: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.btn-box {
    float: right;
}

.num-span {
    color: #409eff;
    margin-left: 15px;
    font-weight: bold;
    font-size: 16px;
}
</style>